<template>
  <div class="card-container" v-if="!$common.isEmpty(videoList)">
  
    <div  v-for="(resourcePath, index) in videoList"
         :key="index"
         class="card-item wow shadow-box-mini">
       
      <div class="card-image">
       
        <!-- <video  autoplay="autoplay" muted loop="loop"
               :src="resourcePath.url">
        </video> -->
        <!-- <el-image class="my-el-image"
                  v-once
                  lazy
                  :preview-src-list="[resourcePath.url]"
                  :src="resourcePath.cover"
                  fit="cover">
          <div slot="error" class="image-slot"></div>
        </el-image> -->
        <el-tooltip placement="top" effect="light">
          <div slot="content">{{resourcePath.title}}</div>
          <div class="card-desc">
            {{resourcePath.title}}
          </div>
        </el-tooltip>
        <div  class="player">
          <video-Player
            ref="videoPlayer"
            class="player-video"
            :playsinline="true"
            
            :options="playerOptions[index]"
            @ready="onPlayerReady"
            @play="onPlayerPlay($event,index)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnd($event)"
            @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)"
            @loadeddata="onPlayerLoadeddata($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @statechanged="playerStateChanged($event)"
          ></video-Player></div>






      </div>
      <div class="card-body">
       
        <div class="card-time">
          Date: {{$common.getDateDiff(resourcePath.createTime)}}
        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
import constant from '../../utils/constant';

import { videoPlayer } from 'vue-video-player';
require("video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
  export default {
    
    components:{
      videoPlayer

    },
    props: {
      type: String,
     

      resourcePathList: {
        type: Array
      },
      lastTime: {  // 传入的上次播放位置
      type: Number,
      default: 0,
    },
    
     
    },

   


    data() {
      return {
      
      srcVideo:"",
      videoList:[],
      playedTime: this.lastTime,
      currentTime: 0,
      maxTime: 0,
      playsinline: true,
      playerOptions: [],
      options: "",

 
      playOptions: {
        height: "200px",
        width: "100%",
      //   playbackRates: [1,0.5,2,2.5], // 可选的播放速度
      //   autoplay: true, // 如果为true,浏览器准备好时开始回放
      //   muted: false, // 默认情况下静音播放
      //   loop: false, // 是否视频一结束就重新开始
      //   preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据，auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      //   language: "zh-CN",
      //   aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      //   fluid: true, // 当true时，Video.js player将拥有流体大小，换句话说，它将按比例缩放以适应其容器
      //   sources: [
      //     {
           
      //       type: "video/mp4", // 类型
      //       src: this.resourcePathList[0].url
      //       // src: require('../common/5.mp4')// url地址，在使用本地的资源时，需要用require()引入，否则控制台会报错
      //     },
      //   ],
      //   poster: "", // 设置封面地址
      //   notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
      //   controlBar: {
      //     currentTimeDisplay: true,
      //     progressControl: true,  // 是否显示进度条
      //     playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
      //     timeDivider: true, // 当前时间和持续时间的分隔符
      //     durationDisplay: true, // 显示持续时间
      //     remainingTimeDisplay: true, // 是否显示剩余时间功能
      //     fullscreenToggle: true, // 是否显示全屏按钮
      //   },
      // },

      }
    }

      // }
    },

    computed: {
     
     
    },

    watch: {
      resourcePathList(newnew,oldold){
        this.videoList = newnew
        this.getMovieList()
      },
      immediate: true,
      deep: true
    },

    created() {
      
      
		// 方法区

     

    },

    mounted() {
     

   

    },

    methods: {

      getMovieList() {
    // 这里正常来说应该是从后台获取的数据，以下操作都是在成功的回调函数里
      for (var i = 0; i < this.videoList.length; i++) {
          let arrs = {
            playbackRates: [0.5,1.0,1.5, 2.0,2.5 ,3.0], //播放速度
           

            autoplay: false, //如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: "zh-CN",
            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [
              {
                type: "video/mp4",
              
                src: this.videoList[i].url //url地址
              }
            ],
            poster: this.videoList[i].cover,
            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,
              durationDisplay: true,
             
              fullscreenToggle: true ,
              remainingTimeDisplay: true, // 是否显示剩余时间功能
              
            }
          };
          this.playerOptions.push(arrs);
        }
    },
    onPlayerPlay(player, index) {
 
      
       var that = this.$refs.videoPlayer;
       for (let i = 0; i < that.length; i++) {
          if(i != index)
          that[i].player.pause()
       }
    },
    onPlayerPause(player) {

      
},

      clickDemo(){
        this.items  =  this.resourcePathList
        alert(this.items[0].url)
      },
        // 准备好了
    onPlayerReady() {
      console.log("准备好了");
    },
    // 视频播放
    // onPlayerPlay(player) {
    //   console.log('播放了');
    //   console.log(player);
    //   let playTime = 0;
    //     if (
    //       Number(Math.floor(this.playedTime)) ===
    //       Number(Math.floor(player.duration()))
    //     ) {
    //       this.playedTime = 0;
    //       playTime = 0;
    //     } else if (
    //       Number(Math.floor(player.currentTime())) !==
    //       Number(Math.floor(this.playedTime))
    //     ) {
    //       playTime = this.playedTime;
    //       player.currentTime(playTime)
    //     }
    // },
    // // 视频暂停的
    // onPlayerPause(player) {
    //   console.log('暂停中');
    //   console.log(player);
    //   this.playedTime = player.currentTime();
    // },
    // 视频播放完
    onPlayerEnd(player) {
      console.log('播放结束了');
      console.log(player);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 视频已开始播放
    onPlayerPlaying(player) {
      console.log("开始播放了");
      console.log(player);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log("开始下载数据");
      console.log(player);
    },
    // 当前播放位置发生变化时触发
    onPlayerTimeupdate(player) {
      console.log("播放位置变化了");
      console.log(player);
      let timeDisplay = player.currentTime();
        if (timeDisplay - this.currentTime > 1) {
            player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
        }
        this.currentTime = player.currentTime();
        this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放状态改变
    playerStateChanged(playerCurrentState) {
      console.log("播放状态变化了");
      console.log(playerCurrentState);
    },
    // 手动暂停视频的播放
    pause() {
      // 视频播放器的方法调用，要使用this.$refs.videoPlayer.player这个对象去调用
      this.$refs.videoPlayer.player.pause()
    }
  },



    }

</script>

<style scoped>

  .card-container {
    display: flex;
    flex-wrap: wrap;
    
  }

  .card-item {
    position: relative;
    overflow: hidden;
    margin: 15px;
    height: 265px;
    flex-shrink: 0;
    width: calc(100% / 3 - 30px);
    cursor: pointer;
    animation: zoomIn 0.8s ease-in-out;
    padding: 1.3rem 1.3rem 1.5rem;
    background: var(--background);
    border-radius: 1.5rem;
    transition: all 0.2s;
  }
  .my-animation-slide-top {
    animation-name: slide-top
}

.my-animation-slide-bottom {
    animation-name: slide-bottom
}

.my-animation-hideToShow {
    animation-name: hideToShow
}





  .card-image {
    width: 100%;
    height: 400px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(147, 147, 147, 0.61);
    margin-bottom: 1rem;
  }

  .card-image >>> .el-image__inner {
    transition: all 1s;
  }

  .card-image >>> .el-image__inner:hover {
    transform: scale(1.2);
  }

  .card-body {
    padding: 10px 5px;
  }

  .card-desc {
    font-weight: 600;
    text-align: center;
    font-size: 1.05rem;
    color: var(--fontColor);
    letter-spacing: 1px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .card-time {
    position: absolute;
    bottom: 10px;
    color: #999999;
    font-weight: 500;
  }

  @media screen and (max-width: 1300px) {
    .card-item {
      width: calc(100% / 2 - 30px);
    }
  }

  @media screen and (max-width: 1000px) {
    .card-item {
      height: 450px;
    }

    .card-image {
      height: 300px;
    }
  }

  @media screen and (max-width: 750px) {
    .card-item {
      width: 100%;
      margin: 15px 0;
      height: 325px;
    }
  }
  /* 一般的话手机端的适配大小 */

  @media screen and (max-width: 450px) {
    .card-item {
      height: 265px;
    }

    .card-image {
      height: 250px;
    }
  }

</style>
